<template>
	<view class="search">
		<view class="search-view">
			<u-search :placeholder="$t('searchPage.search')" :actionText="$t('searchPage.search')" v-model="serachValue" @click="click"
				@change="serachChange" @custom="clickSearch" :actionStyle="actionStyle" height="37">
			</u-search>
		</view>
		<view class="history-records">
			<view class="">
				{{$t("searchPage.history")}}
			</view>
			
			<view class="history-right">
				<view class="del" v-if="!show" @tap="delHistory">
					{{$t("searchPage.del")}}
				</view>
				
				<view class="del" v-if="show" @tap="hintShow=true">
					{{$t("searchPage.allDel")}}
				</view>
				
				<view class="del" v-if="show" @tap="cancelDelHistory">
					{{$t("searchPage.cancel")}}
				</view>
				
				<image class="del-img" src="../../static/icon/image_89.png" mode=""></image>
			</view>
		</view>
		
		<view class="history-list" v-if="historyList">
			<view @tap="clickSearch(item.content)" class="history-item" v-for="(item, index) in historyList" :key="item.id">
				{{item.content}}
				<u-icon v-if="show" @tap="selectDel(index)" name="close-circle-fill" color="#858585" size="14"></u-icon>
			</view>
		</view>
		
		<u-modal :show="hintShow" :confirmText="confirmText" :cancelText="cancelText" :content='content' @confirm="allDel" @close="hintShow=false" @cancel="hintShow=false" closeOnClickOverlay showCancelButton></u-modal>
		
		<view class="history-records">
			<view class="">
				{{$t("searchPage.hotHistory")}}
			</view>
		</view>
		
		<view class="history-list" v-if="hotHistoryList">
			<view @tap="clickSearch(item.content)" class="history-item" v-for="(item, index) in hotHistoryList" :key="item.id">
				{{item.content}}
			</view>
		</view>
		<!-- <view class="history-commodity">
			<view class="item" v-for="item in 2">
				<image class="img"
					src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqna.smzdm.com%2F202102%2F26%2F60388c222c5ce5149.png_e680.jpg&refer=http%3A%2F%2Fqna.smzdm.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665027891&t=378a64f8e9d8b73f4b047db9fa64b389"
					mode=""></image>
				<view class="item-info">
					<view class="info-top">CHANEL PEARL CRUSH</view>
					<view class="info-mid">$ 4,995</view>
					<view class="info-bottom">
						<text>最低报价</text>
						<text class="fl">已售0</text>
					</view>
				</view>
			</view>
		</view>
		<view class="like-commodity">
			<view class="title">
				{{$t("searchPage.like")}}
			</view>
			<view class="like-commodity-list">
				<moreItem />
			</view>
		</view> -->
	</view>
</template>

<script>
	import search from '@/components/search.vue'
	import moreItem from '@/components/moreItem.vue'
	import { addSearchHistory, delSearchHistory,getSearchHistory,getHotSearchHistory } from "@/common/api.js"
	
	export default {
		components: {
			search,
			moreItem
		},
		data() {
			return {
				serachValue: "",
				want: null,
				show: false,
				historyList: null,
				hotHistoryList: null,
				content: this.$t('search.hint'),
				hintShow: false,
				confirmText: this.$t('common.confirm'),
				cancelText: this.$t('common.cancel'),
				isDel: false,
				actionStyle: {
					width: "90rpx"
				}
			}
		},
		methods: {
			// 删除全部记录
			async allDel() {
				let temp = "";
				this.historyList.forEach((item) => {
					temp += item.content + ","
				});
				temp = temp.slice(0, temp.length - 1)
				this.historyList = null;
				this.show = false;
				this.hintShow = false;
				const res = await delSearchHistory(temp);
				console.log(res);
			},
			cancelDelHistory() {
				this.show = false;
				this.isDel = false;
			},
			serachChange() {
				// console.log(this.serachValue);
			},
			async clickSearch(item) {
				console.log(item);
				// console.log(addSearchHistory);
				// const historyRes = await addSearchHistory({content: this.serachValue});
				// const res = await getSearchGoods(this.serachValue);
				// console.log(historyRes);
				if(this.serachValue.trim() == '' && !item) {
					uni.showToast({
						icon: 'none',
						title: this.$t('search.hint2'),
						duration: 1200,
						mask: true
					})
					return;
				}
				
				if(this.isDel) {
					return;
				}
				
				if(this.want && item) {
					uni.navigateTo({
						url:`/pages/searchResult/searchResult?searchValue=${item}&want=${1}`
					})
					return
				}
				
				if(item) {
					uni.navigateTo({
						url:`/pages/searchResult/searchResult?searchValue=${item}`
					})
					return
				} 
				
				if(this.serachValue) {
					uni.navigateTo({
						url:`/pages/searchResult/searchResult?searchValue=${this.serachValue}`
					})
					return
				} 
				
				
				
				// console.log(res);
			},
			delHistory() {
				this.show = true;
				this.isDel = true;
			},
			async selectDel(index) {
				const temp = this.historyList.splice(index, 1);
				const res = await delSearchHistory(temp[0].content);
				console.log(res);
				// this.show = false;
			},
			async initData() {
				const res = await getSearchHistory();
				const res1 = await getHotSearchHistory();
				console.log(res, res1);
				this.historyList = res.rows;
				this.hotHistoryList = res1.rows;
			}
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("searchPage.title")});
		},
		onShow() {
			this.initData();
		},
		onLoad(option) {
			if(option.want) {
				this.want = option.want;
			}
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	.search-view {
		padding: 14rpx 24rpx;
		position: fixed;
		/* #ifdef APP */
		top: 0;
		/* #endif */
		
		/* #ifdef H5 */
		top: 86rpx;
		/* #endif */
		left: 0;
		/* right: 0; */
		width: 100%;
		z-index: 999;
		box-sizing: border-box;
		background-color: #fff;
	}
	
	.search {
		// padding: 0rpx 24rpx;
		background: #fbfbfb;
	}

	.history-records {
		// height: 200rpx;
		padding: 0 25rpx;
		margin-top: 120rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 700;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		
		.history-right {
			display: flex;
			align-items: center;
			
			.del {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 700;
				font-size: 25rpx;
				color: #858585;
				margin-right: 12rpx;
			}
			
			.del-img { 
				width: 25rpx;
				height: 25rpx;
			}
		}
	}
	
	.history-list {
		// margin-top: 40rpx;
		display: flex;
		flex-wrap: wrap;
		
		.history-item {
			margin-top: 40rpx;
			padding: 0 30rpx;
			background: #DADADA;
			border-radius: 10px;
			margin-left: 25rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 700;
			font-size: 24rpx;
			color: #858585;
			height: 45rpx;
			line-height: 45rpx;
			position: relative;
			
			.u-icon {
				position: absolute;
				top: -8rpx;
				right: -8rpx;
			}
		}
		
		.history-item:first-child {
			
		}
	}

	// .history-commodity {
	// 	background: #ffffff;

	// 	.item {
	// 		display: flex;
	// 		width: 696rpx;
	// 		height: 208rpx;
	// 		font-family: PingFang SC;
	// 		font-weight: bold;
	// 		margin-bottom: 40rpx;

	// 		.img {
	// 			display: block;
	// 			box-sizing: border-box;
	// 			height: 100%;
	// 			width: 311.22rpx;
	// 			margin-right: 18.36rpx;
	// 		}

	// 		.item-info {
	// 			width: 386rpx;

	// 			.info-top {
	// 				color: #000000;
	// 				font-size: 30rpx;
	// 				margin-bottom: 44rpx;
	// 			}

	// 			.info-mid {
	// 				color: #FF0000;
	// 				font-size: 36rpx;
	// 				margin-bottom: 30rpx;
	// 			}

	// 			.info-bottom {
	// 				color: #858585;
	// 				font-size: 20rpx;
	// 				display: flex;

	// 				.fl {
	// 					margin-left: auto;
	// 				}
	// 			}
	// 		}

	// 	}
	// }

	// .like-commodity {
	// 	text-align: center;
	// 	border-radius: 20rpx;
	// 	background: #ffffff;
	// 	box-shadow: 0rpx -2rpx 16rpx 0rpx #00000019;

	// 	.title {
	// 		padding-top: 40rpx;
	// 		padding-bottom: 44rpx;
	// 	}
	// }
</style>
